<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>price</th>
        </tr>
    </table>
    <script>
        let data = [
            { id: 1, name: "iPhone14", price: 5999 },
            { id: 2, name: "iPhone14 Pro", price: 7999 },
            { id: 3, name: "iPhone14 Pro Max", price: 8999 }
        ];
        // //克隆表身
        // let tbody = document.querySelector("tbody");//getElementByTagName("tbody")
        // console.log(tbody);
        // //获取tr 行数（取决于data的长度）
        // //data.forEach(function(item){})
        // for (let i = 0; i < data.length; i++) {
        //     //创建新的行(tr)
        //     let tr = document.createElement("tr");
        //     //将新的tr添加到表身tbody里
        //     tbody.appendChild(tr);
        //     //遍历i
        //     for (let k in data[i]) {
        //         //创建一个列（td)
        //         let td = document.createElement("td")
        //         //把值给列td,并且打印到桌面
        //         td.innerHTML = data[i][k]
        //         tr.appendChild(td);
        //     }
        // }
        let tbody=document.querySelector("tbody")
        data.forEach(function(item){
            let tr=document.createElement("tr")
            for(let key in item){
                let td=document.createElement("td")
                tr.appendChild(td)
                td.innerHTML=item[key]
            }
            tbody.appendChild(tr)
        })
    </script>
</body>

</html>